
<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="UTF-8" />
	<title>Swift网盘登录</title>
	<link rel="icon" href="/static/img/cloud.png">
	<link rel="stylesheet" href="/static/libs/particles/css/style.css">
	<link rel="stylesheet" href="/static/css/base.css">
	<link rel="stylesheet" href="/static/css/login.css" />
</head>
<body>
	<!-- particles.js container -->
	<div id="particles-js"></div>
	<div id="wrapper">
		<div>
			<img src="/static/img/cloud.png"height="100" width="110" />
			<h2>Swift网盘系统</h2>
		</div>
		<div id="login">
			<form method="post" action="/zgh0381/login_check/" enctype="multipart/form-data">
				{% csrf_token %}
				<ul class="group_input">
					<li>
						<input type="text" class="mobile required" id="mobile" name="username" placeholder="用户名" />
					</li>
					<li>
						<input type="password" class="psd required" id="psd" name="password" placeholder="密码" />
					</li>
				</ul>
				<button type="submit" class="submit_btn" id="btnSubmit">登录</button>
			</form>
		</div>
	</div>
		<div id="footer">
			<span>&copy;2021百度商务合作</span><span>·</span><a href="javascript:;">移动开发平台</a><span>·</span><a href="javascript:;">发现</a><span>·</span><a href="javascript:;">移动应用</a><span>·</span><a href="javascript:;">使用机构账号登录</a><span>·</span><a href="javascript:;">联系我们</a><span>·</span><a href="javascript:;">好友分享共度美好时光</a><br />
			<span>·</span><a href="javascript:;">京ICP证110745号</a><span>·</span><span>京公网安备11010802010035号</span><span>·</span><a href="javascript:;">出版物经营许可证</a>
		</div>
	</div>
	<script src="/static/libs/jquery-1.12.4/jquery.min.js"></script>
	<script src="/static/libs/particles/particles.min.js"></script>
	<script src="/static/libs/particles/js/app.js"></script>
	<!-- <script src="../assets/libs/particles/js/lib/stats.js"></script> -->
	<script>
		var count_particles, stats, update;
		stats = new Stats;
		stats.setMode(0);
		stats.domElement.style.position = 'absolute';
		stats.domElement.style.left = '0px';
		stats.domElement.style.top = '0px';
		document.body.appendChild(stats.domElement);
		count_particles = document.querySelector('.js-count-particles');
		update = function() {
			stats.begin();
			stats.end();
			if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
				count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
			}
			requestAnimationFrame(update);
		};
		requestAnimationFrame(update);
	</script>
	<script>
		$(function(){
		//为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
        // $("form :input.required").each(function () {
        //     //通过jquery api：$("HTML字符串") 创建jquery对象
        //     var $required = $("<strong class='high'>*</strong>");
        //     //添加到this对象的父级对象下
        //     $(this).parent().append($required);
        // });
			// var errorMsg = $(".error-msg").text();
		//为表单元素添加失去焦点事件
		$("form :input").blur(function(){
			var $parent = $(this).parent();
			$parent.find(".msg").remove(); //删除以前的提醒元素（find()：查找匹配元素集中元素的所有匹配元素）
			//验证手机号
			if($(this).is("#mobile")){
				var mobileVal = $.trim(this.value);
				// var regMobile = /^1[3|4|5|7|8][0-9]{9}$/;
				if(mobileVal == ""){
					var errorMsg = " 请输入用户名！";
					$parent.append("<span class='msg onError'>" + errorMsg + "</span>");
				} else{
					var okMsg=" 输入正确";
                    $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
				}
			}
			//验证密码
            if($(this).is("#psd")){
                var psdVal = $.trim(this.value);
              //  var regPsd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
                if(psdVal== ""){
                    var errorMsg = "请输入密码!";
                    $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                }
                else{
                    var okMsg=" 输入正确";
                    $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                }
            }
		}).keyup(function(){
			//triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
			$(this).triggerHandler("blur");
		}).focus(function(){
			$(this).triggerHandler("blur");
		});

				//点击重置按钮时，通过trigger()来触发文本框的失去焦点事件
		$("#btnSubmit").click(function(){
    		//trigger 事件执行完后，浏览器会为submit按钮获得焦点
    		$("form .required:input").trigger("blur");
    		var numError = $("form .onError").length;
    		if(numError){
    			return false;
    		}
    		alert('登陆成功！')

    	});
		})

	</script>
</body>
</html>
